<template>
  <div class="qrcode-login">
    <div class="qrcode-login-title">{{ $t('login.qrcode-login') }}</div>
    <div
      v-loading="qrcodeStatus === QrcodeStatus.pending"
      class="qrcode-content display-flex flex-justify"
    >
      <img
        v-if="
          qrcodeStatus !== QrcodeStatus.pending &&
          qrcodeStatus !== QrcodeStatus.error
        "
        :src="qrcodeUrl"
      />
      <div
        v-if="qrcodeStatus == QrcodeStatus.scan"
        class="scan display-flex display-column flex-align flex-justify"
      >
        <el-icon>
          <i-ep-SuccessFilled />
        </el-icon>
        <span>{{ $t('login.scan-success') }}</span>
        <span>{{ $t('login.tap-allow-to-login') }}</span>
      </div>
      <div
        v-if="qrcodeStatus == QrcodeStatus.overdue"
        class="overdue display-flex display-column flex-align flex-justify"
      >
        <span>{{ $t('login.qr-code-expired') }}</span>
        <div
          class="display-flex flex-align anew-button"
          @click="generateQRCode"
        >
          <el-icon>
            <i-ep-RefreshRight />
          </el-icon>
          <span>{{ $t('login.click-refresh') }}</span>
        </div>
      </div>
      <div
        v-if="qrcodeStatus == QrcodeStatus.error"
        class="error display-flex display-column flex-align flex-justify"
      >
        <span style="color: rgb(var(--core-error-color))">{{
          $t('login.check-network')
        }}</span>
        <div
          class="display-flex flex-align anew-button"
          @click="generateQRCode"
        >
          <el-icon>
            <i-ep-RefreshRight />
          </el-icon>
          <span>{{ $t('login.click-reload') }}</span>
        </div>
      </div>
    </div>
    <div class="qrcode-login-tips display-flex flex-justify">
      <span>{{ $t('login.scan-then-confirm') }}</span>
    </div>
    <div class="display-flex">
      <el-button class="flex-1" @click="handleBack">{{
        $t('login.back')
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import QRCode from 'qrcode'
import { onUnmounted, ref } from 'vue'
import { delay } from '@/utils'

const router = useRouter()

// 轮询获取二维码时效
let timer: number | null
const getQrcodeStatus = async () => {
  try {
    // if ('过期') {
    //   return (qrcodeStatus.value = QrcodeStatus.overdue)
    // }
    // if ('扫描了二维码，还未点击确定登录') {
    // return (qrcodeStatus.value = QrcodeStatus.scan)
    // }
    // if ('登录') {
    //   if (timer) clearInterval(timer)
    //   if (route.query.redirect) {
    //     router.replace(route.query.redirect as string)
    //   } else {
    //     router.replace('/')
    //   }
    // }
  } catch (error) {
    qrcodeStatus.value = QrcodeStatus.error
    return error
  }
}

// 生成二维码
const qrcodeUrl = ref('')
enum QrcodeStatus {
  pending,
  success,
  scan,
  overdue,
  error
}
const qrcodeStatus = ref<QrcodeStatus>(QrcodeStatus.pending)
const generateQRCode = async () => {
  try {
    qrcodeStatus.value = QrcodeStatus.pending
    if (timer) window.clearInterval(timer)
    await delay(1000)
    const res = await QRCode.toDataURL('hello world ' + new Date().getTime())
    qrcodeUrl.value = res
    qrcodeStatus.value = QrcodeStatus.success
    // 轮询获取二维码状态   可以使用短轮询、长轮询、web WebSocket
    timer = window.setInterval(() => {
      getQrcodeStatus()
    }, 2000)
  } catch (error) {
    qrcodeStatus.value = QrcodeStatus.error
    return error
  }
}
generateQRCode()

const handleBack = () => {
  router.replace('/login/enter')
}

onUnmounted(() => {
  if (timer) window.clearInterval(timer)
})

defineOptions({
  name: 'CoreQrcodeLogin'
})
</script>

<style scoped lang="scss">
.qrcode-login {
  margin: 24px 54px;

  .qrcode-login-title {
    margin-bottom: 22px;
    font-size: 36px;
    font-weight: 700;
  }

  .qrcode-content {
    position: relative;
    height: 224px;

    img {
      height: 100%;
    }

    .overdue,
    .scan {
      position: absolute;
      inset: 0;
      background-color: rgb(255 255 255 / 80%);
    }

    .scan {
      .el-icon {
        font-size: 46px;
        color: rgb(var(--core-success-color));
        background: #fff;
        border-radius: 50%;
      }

      & > span:nth-child(2) {
        margin: 10px 0;
        font-size: 20px;
        font-weight: 700;
      }

      & > span:nth-child(3) {
        font-size: 14px;
      }
    }

    .anew-button {
      margin-top: 20px;
      font-size: 14px;
      color: rgb(var(--core-primary-color));
      cursor: pointer;
    }
  }

  .qrcode-login-tips {
    margin: 16px 0;
    font-size: 14px;
    color: var(--core-text-color-05);
  }
}
</style>
